<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <input type="text" class="txt">
    <p class="box"></p>
</body>
<script>
    const txt = document.querySelector(".txt");
    const box = document.querySelector(".box");

    let i=0;

    // 防抖之前
    // txt.oninput = function(){
    //     box.innerHTML = txt.value;
    //     console.log(++i);
    // }
    
    // 防抖之后
    let t = null;
    txt.oninput = function(){
        clearTimeout(t);
        t = setTimeout(()=>{
            box.innerHTML = txt.value;
            console.log(++i);
        }, 500);
    }
    

</script>
</html>